<template>
  <div class="container">
    <el-row>
      <el-col
        :span="6"
      >
        <Logo />
      </el-col>
      <el-col
        :span="8"
        align="middle"
      >
        <Income />
      </el-col>
      <el-col :span="10">
        <Inverter />
        <div class="h147 mt15 bg plr15 flex-col-middle">
          <div class="text-center fn16">光伏产出</div>
          <div class="flex-middle mt15">
            <div class="w40">今日</div>
            <el-progress
              class="flex1 ml8"
              :stroke-width="13"
              :percentage="70"
              :format="format"
              type="line"
            />
          </div>
          <div class="flex-middle mt15">
            <div class="w40">累计</div>
            <el-progress
              class="flex1 ml8"
              :stroke-width="13"
              :percentage="100"
              :format="format"
            />
          </div>
        </div>
      </el-col>
    </el-row>
    <SolidBorder class="mt15 sb-h">
      <Bottom />
    </SolidBorder>
  </div>
</template>

<script lang="ts" setup>
import Logo from './logo.vue'
import Income from './income.vue'
import Inverter from './inverter.vue'
import SolidBorder from '@/components/SolidBorder/index.vue'
import Bottom from './bottom.vue'
const format = (percentage: number) => percentage + 'kWh'
</script>

<style lang="scss" scoped>
$color: #fff;
$primary_color: #29f1fa;
// $gray: rgb(141, 153, 160);
// .gray {
//   color: $gray;
// }
.flex1 {
  flex: 1;
}
.w40 {
  width: 40px;
  text-align: right;
}
.sb-h {
  height: calc(100% - 467px - 1.5rem);
}
.container {
  height: calc(100vh - 6.9rem);
  width: 100%;
  color: $color;
  padding: 1.5rem;
  box-sizing: border-box;
}
.h147 {
  height: 147px;
}
.bg {
  background-color: #0A1E2C;
}
:deep(.el-progress__text) {
  color: #fff;
}
:deep(.el-progress) {
  .el-progress-bar__outer {
    background: transparent;
  }
  .el-progress-bar__inner{
    background-color: unset;
    background-image: linear-gradient(to left, #29F1FA 0%, rgba(27,126,242,0) 100%);
  }
}
</style>
